<!--
 * @Description: 供应链tabbar
 * @Author: Kerwin
 * @Date: 2024-08-26 18:08:45
 * @LastEditTime: 2025-09-29 17:25:03
 * @LastEditors:  Please set LastEditors
-->

<template>
  <view class="tabbar">
    <view
      v-for="(item, index) in tabs"
      class="item"
      :class="{ active: tabIndex === index }"
      @click="handleClick(index)"
    >
      <u-icon
        :name="tabIndex === index ? item.icon_on : item.icon"
        size="46"
      ></u-icon>
      <view class="name">{{ item.name }}</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/store'
import icon_home from '../../static/tabs/home2.png'
import icon_home_on from '../../static/tabs/home.png'
import icon_category from '../../static/tabs/c2.png'
import icon_category_on from '../../static/tabs/c1.png'
import icon_car from '../../static/tabs/car2.png'
import icon_car_on from '../../static/tabs/car.png'
import icon_my from '../../static/tabs/my2.png'
import icon_my_on from '../../static/tabs/my.png'

const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const props = withDefaults(
  defineProps<{
    isBack?: boolean
    current?: number
  }>(),
  {
    isBack: true,
    current: 0
  }
)
const tabs = reactive([
  {
    name: '首页',
    icon: icon_home,
    icon_on: icon_home_on
  },
  {
    name: '分类',
    icon: icon_category,
    icon_on: icon_category_on
  }
  // {
  //   name: '购物车',
  //   icon: icon_car,
  //   icon_on: icon_car_on
  // }
  // {
  //   name: '我的',
  //   icon: icon_my,
  //   icon_on: icon_my_on
  // }
])
const tabIndex = ref(0)
watch(
  () => props.current,
  (value) => {
    tabIndex.value = value
  },
  { immediate: true }
)
const emit = defineEmits(['change'])
function handleClick(index: number) {
  tabIndex.value = index
  emit('change', index)
}
function setTabIndex(index: number) {
  tabIndex.value = index
}
defineExpose({
  setTabIndex
})
</script>

<style lang="scss" scoped>
.tabbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 110rpx;
  width: 100%;
  padding: env(safe-area-inset-bottom);
  position: relative;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  // border-top: 1rpx solid #efefef;

  .item {
    font-size: 28rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999999;

    &.active {
      color: #333;
    }

    .name {
      margin-top: 6rpx;
      font-size: 24rpx;
    }
  }
}
</style>
